<template>
  <view v-if="list && list.length > 0" :class="lxName == 'wbt' ? 'mb4' : 'mb2'">
    <view
      v-if="lxName !== 'wbt'"
      class="dbt flex flex_between"
      :class="lxName"
      @click="jumps(lxName)"
    >
      <view class="left">
        {{ name }}
      </view>
      <view v-if="lxName == 'bt1'" class="right flex">
        <text style="margin-right: 5rpx">查看更多</text>
        <u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
      </view>
      <view v-if="lxName !== 'bt1'" class="right flex">
        <text style="margin-right: 5rpx">查看更多</text>
        <u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
      </view>
    </view>
    <view v-if="lxName == 'wbt'" class="cardCont wbtCont">
      <view class="headBt flex flex_between">
        <image :src="imgHost + '/title_miaosha@2x.png'"></image>
        <view class="right flex" @click="jump2('/pages/flashSale/index')">
          <text style="margin-right: 3rpx">更多</text>
          <u-icon name="arrow-right" color="#FE2C2E" size="22rpx"></u-icon>
        </view>
      </view>
      <image :src="imgHost + '/ic_miaosha@2x.png'" class="ms"></image>
      <view class="content">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="box_item"
          @click="jumpBtn(item)"
        >
          <view class="cont">
            <image
              :src="
                item.businessImg
                  ? item.businessImg
                  : imgHost + '/default_list.jpg'
              "
              class="top"
            ></image>
            <view class="bottom">
              <view class="f30 c2 limit-1-line">
                {{ item.businessName || "" }}
              </view>
              <view class="f24 c9" style="margin-top: 8rpx">
                {{ item.businessInfo }}
              </view>
              <view class="zsd flex flex_between" style="margin-top: 8rpx">
                <view class="f22">
                  <text>秒杀价</text>
                  <text>¥</text>
                  <text>{{ item.discountPrice }}</text>
                  <text>¥{{ item.businessOriginPrice }}</text>
                </view>
              </view>
              <view
                v-if="item.status == '1'"
                class="payBtn flex flex_between mt10"
              >
                <u-count-down
                  :time="item.time"
                  format="DD:HH:mm:ss"
                  autoStart
                  millisecond
                  @change="onChange($event, index)"
                >
                  <view class="time">
                    <text
                      v-if="item.timeData.days && item.timeData.days > 0"
                      class="time__item"
                      >{{ item.timeData.days }}</text
                    >
                    <text
                      v-if="item.timeData.days && item.timeData.days > 0"
                      class="jg"
                      >天</text
                    >
                    <text class="time__item">{{
                      item.timeData.hours >= 10
                        ? item.timeData.hours
                        : "0" + item.timeData.hours
                    }}</text>
                    <text class="jg">:</text>
                    <text class="time__item">{{ item.timeData.minutes }}</text>
                    <text class="jg">:</text>
                    <text class="time__item">{{ item.timeData.seconds }}</text>
                  </view>
                </u-count-down>
                <image :src="imgHost + '/btn_qiang@2x.png'"></image>
              </view>
              <view v-if="item.status == '0'" class="payBtnb flex mt10">
                距开始
                <u-count-down
                  :time="item.time"
                  format="DD:HH:mm:ss"
                  autoStart
                  millisecond
                  @change="onChange($event, index)"
                >
                  <view class="times">
                    <text
                      v-if="item.timeData.days && item.timeData.days > 0"
                      class="time__item"
                      >{{ item.timeData.days }}</text
                    >
                    <text
                      v-if="item.timeData.days && item.timeData.days > 0"
                      class="jg"
                      >天</text
                    >
                    <text class="time__item">{{
                      item.timeData.hours >= 10
                        ? item.timeData.hours
                        : "0" + item.timeData.hours
                    }}</text>
                    <text class="jg">:</text>
                    <text class="time__item">{{ item.timeData.minutes }}</text>
                    <text class="jg">:</text>
                    <text class="time__item">{{ item.timeData.seconds }}</text>
                  </view>
                </u-count-down>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="lxName == 'zbt'" class="cardCont zbtCont">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="box_item mb2 flex"
        @click="jumpBtn(item)"
      >
        <image :src="imgHost + '/ic_xianshi@2x.png'" class="ms"></image>
        <image
          :src="
            item.businessImg ? item.businessImg : imgHost + '/default_list.jpg'
          "
          class="left"
        ></image>
        <view class="right">
          <view class="f30 c2 limit-1-line">
            {{ item.businessName || "" }}
          </view>
          <view class="f22 c9 mt10">
            {{ item.businessInfo }}
          </view>
          <view class="zsd flex mt10 flex_between">
            <view class="f22">
              <text>折扣价</text>
              <text>¥</text>
              <text>{{ item.discountPrice }}</text>
              <text>¥{{ item.businessOriginPrice }}</text>
            </view>
            <view v-if="item.status != '0'" class="payBtn"> 抢购 </view>
            <view v-if="item.status == '0'" class="payBtn hui"> 即将开抢 </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="lxName == 'bt2'" class="cardCont bt2Cont">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="box_item mb2"
        @click="jumpBtn(item)"
      >
        <image :src="imgHost + '/ic_xianshi@2x.png'" class="ms"></image>
        <image
          :src="
            item.businessImg ? item.businessImg : imgHost + '/default_list.jpg'
          "
          class="left"
        ></image>
        <view class="right">
          <view class="f30 c2 limit-1-line">
            {{ item.businessName || "" }}
          </view>
          <view class="f22 c9 mt10">
            {{ item.businessInfo }}
          </view>
          <view class="zsd flex mt10 flex_between">
            <view class="f22">
              <text>¥</text>
              <text>{{ item.discountPrice }}</text>
              <text>¥{{ item.businessOriginPrice }}</text>
            </view>
            <view v-if="item.status != '0'" class="payBtn"> 抢购 </view>
            <view v-if="item.status == '0'" class="payBtn hui"> 即将开抢 </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="lxName == 'bt1'" class="cardCont btCont">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="box_item mb2"
        @click="jumpBtn(item)"
      >
        <image :src="imgHost + '/ic_miaosha@2x.png'" class="ms"></image>
        <view class="head flex">
          <view class="zsd f26">
            {{
              item.status == "0"
                ? "距秒杀开始："
                : item.status == "1"
                ? "距秒杀结束："
                : "活动已结束"
            }}
          </view>
          <u-count-down
            v-if="item.status != '2'"
            :time="item.time"
            format="DD:HH:mm:ss"
            autoStart
            millisecond
            @change="onChange($event, index)"
          >
            <view class="time">
              <text
                v-if="item.timeData.days && item.timeData.days > 0"
                class="time__item"
                >{{ item.timeData.days }}</text
              >
              <text
                v-if="item.timeData.days && item.timeData.days > 0"
                class="jg"
                >天</text
              >
              <text class="time__item">{{
                item.timeData.hours >= 10
                  ? item.timeData.hours
                  : "0" + item.timeData.hours
              }}</text>
              <text class="jg">:</text>
              <text class="time__item">{{ item.timeData.minutes }}</text>
              <text class="jg">:</text>
              <text class="time__item">{{ item.timeData.seconds }}</text>
            </view>
          </u-count-down>
        </view>
        <view class="cont flex">
          <image
            :src="
              item.businessImg
                ? item.businessImg
                : imgHost + '/default_list.jpg'
            "
            class="left"
          ></image>
          <view class="right">
            <view class="f30 c2 limit-1-line">
              {{ item.businessName || "" }}
            </view>
            <view class="f22 c9 mt10">
              {{ item.businessInfo }}
            </view>
            <view class="zsd flex mt10 flex_between">
              <view class="f22">
                <text>秒杀价</text>
                <text>¥</text>
                <text>{{ item.discountPrice }}</text>
                <text>¥{{ item.businessOriginPrice }}</text>
              </view>
              <view v-if="item.status != '0'" class="payBtn"> 马上抢 </view>
              <view v-if="item.status == '0'" class="payBtn hui">
                即将开抢
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    lxName: {
      type: String,
      default: "wbt",
    },
    name: {
      type: String,
      default: "",
    },
    showList: {
      type: Array,
      default: () => ["1", "2", "3", "4"],
    },
  },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    jump(url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2(url, params, a) {
      this.$app.jump2(url, params, a);
    },
    jumps(name) {
      if (name == "bt1") {
        this.jump2("/pages/flashSale/index");
      } else {
        this.jump2("/pages/flashSale/discount");
      }
    },
    jumpBtn(e) {
      if (e.businessType == "04") {
        this.jump("/pages/setmeal/detail?id=", e.businessId);
      } else if (e.businessType == "07") {
        this.jump("/pages/curriculum/detail?id=", e.businessId);
      } else if (e.businessType == "19") {
        this.jump("/subPackages/special/details?id=", e.businessId);
      }
    },
    onChange(e, s) {
      this.list[s].timeData = e;
    },
    getList() {
      let type = "1";
      if (this.lxName == "wbt" || this.lxName == "bt1") {
        type = "0";
      }
      this.$app
        .ajax({
          api: this.$api.secKillList(),
          data: {
            param: {
              rec: "1",
              type,
              venueId: this.$store.state.venueId,
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            let list = res.recordList || [];
            list.forEach((s) => {
              if (s.status == 0) {
                s.time = s.duration * 1000;
              } else if (s.status == 1) {
                s.time = s.duration * 1000;
              } else {
                s.time = 0;
              }
              s.timeData = {};
            });
            this.list = list;
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.zsd {
  color: #fe2c2e;
}

.dbt {
  font-size: 26rpx;
  margin: auto auto 32rpx;
  color: #666666;
  width: 690rpx;

  &.zbt {
    margin-bottom: 20rpx;
  }

  .left {
    font-size: 34rpx;
    font-weight: 600;
    color: #222222;
  }

  .right {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}

.zbtCont {
  .box_item {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: linear-gradient(360deg, #ffffff 0%, #fffcfc 40%, #fff2d7 100%);
    border-radius: 8rpx;
    position: relative;

    .ms {
      position: absolute;
      left: 8rpx;
      z-index: 2;
      width: 76rpx;
      height: 46rpx;
      top: 10rpx;
    }

    .left {
      width: 260rpx;
      height: 148rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
      flex: none;
    }

    .right {
      flex: 1;

      .zsd {
        height: 52rpx;

        .f22 {
          text {
            display: inline-block;

            &:nth-of-type(2) {
              margin-left: 4rpx;
            }

            &:nth-of-type(3) {
              font-size: 32rpx;
              font-weight: bolder;
            }

            &:nth-of-type(4) {
              margin-left: 8rpx;
              text-decoration: line-through;
              color: #999999;
            }
          }
        }
      }

      .payBtn {
        width: 84rpx;
        height: 52rpx;
        text-align: center;
        line-height: 52rpx;
        background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
        box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
        border-radius: 26rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: Medium;
        color: #ffffff;
        &.hui {
          width: 136rpx;
          background: linear-gradient(270deg, #fe2c2e 0%, #ff7c30 100%);
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
          opacity: 0.6;
        }
      }
    }
  }
}

.bt2Cont {
  display: flex;
  flex-wrap: wrap;

  .box_item {
    box-sizing: border-box;
    width: 334rpx;
    padding: 16rpx;
    background: linear-gradient(360deg, #ffffff 0%, #fffcfc 40%, #fff2d7 100%);
    border-radius: 8rpx;
    position: relative;
    margin-right: 22rpx;

    &:nth-child(2n) {
      margin-right: 0;
    }

    .ms {
      position: absolute;
      left: 8rpx;
      z-index: 2;
      width: 76rpx;
      height: 46rpx;
      top: 8rpx;
    }

    .left {
      width: 260rpx;
      height: 148rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
      flex: none;
    }

    .right {
      flex: 1;

      .zsd {
        height: 52rpx;

        .f22 {
          text {
            display: inline-block;

            &:nth-of-type(2) {
              font-size: 32rpx;
              font-weight: bolder;
            }

            &:nth-of-type(3) {
              margin-left: 8rpx;
              text-decoration: line-through;
              color: #999999;
            }
          }
        }
      }

      .payBtn {
        width: 84rpx;
        height: 52rpx;
        text-align: center;
        line-height: 52rpx;
        background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
        box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
        border-radius: 26rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: Medium;
        color: #ffffff;
        &.hui {
          width: 136rpx;
          background: linear-gradient(270deg, #fe2c2e 0%, #ff7c30 100%);
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
          opacity: 0.6;
        }
      }
    }
  }
}

.btCont {
  .box_item {
    box-sizing: border-box;
    background: linear-gradient(360deg, #ffffff 0%, #ffd7db 100%);
    border-radius: 8rpx;
    position: relative;

    .ms {
      position: absolute;
      right: 34rpx;
      z-index: 2;
      width: 88rpx;
      height: 88rpx;
      top: 0rpx;
    }

    .head {
      height: 88rpx;
      padding: 0 20rpx;
      box-sizing: border-box;

      .zsd {
        font-weight: Medium;
      }

      .time {
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #fe2c2e;

        text {
          display: inline-block;

          &.jg {
            margin: 0 8rpx;
          }

          &.time__item {
            width: 44rpx;
            height: 44rpx;
            text-align: center;
            line-height: 44rpx;
            background: linear-gradient(270deg, #fe2c2e 0%, #ff5b30 100%);
            border-radius: 16rpx;
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: Medium;
            color: #ffffff;
          }
        }
      }
    }

    .cont {
      background: #ffffff;
      border-radius: 16rpx 16rpx 8rpx 8rpx;
      padding: 16rpx;
      box-sizing: border-box;

      .left {
        width: 212rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
        flex: none;
      }

      .right {
        flex: 1;

        .zsd {
          height: 52rpx;

          .f22 {
            text {
              display: inline-block;

              &:nth-of-type(2) {
                margin-left: 4rpx;
              }

              &:nth-of-type(3) {
                font-size: 32rpx;
                font-weight: bolder;
              }

              &:nth-of-type(4) {
                margin-left: 8rpx;
                text-decoration: line-through;
                color: #999999;
              }
            }
          }
        }

        .payBtn {
          width: 110rpx;
          height: 52rpx;
          text-align: center;
          line-height: 52rpx;
          background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
          border-radius: 26rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: Medium;
          color: #ffffff;

          &.hui {
            width: 136rpx;
            background: linear-gradient(270deg, #fe2c2e 0%, #ff7c30 100%);
            box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
            opacity: 0.6;
          }
        }
      }
    }
  }
}

.wbtCont {
  background: linear-gradient(360deg, #ffffff 0%, #ffd7db 100%);
  border-radius: 8rpx;
  box-sizing: border-box;
  padding: 24rpx 16rpx 20rpx 16rpx;
  position: relative;

  .ms {
    position: absolute;
    right: 144rpx;
    z-index: 2;
    width: 88rpx;
    height: 88rpx;
    top: 0rpx;
  }

  .headBt {
    box-sizing: border-box;
    padding: 0 8rpx 10rpx;

    image {
      width: 166rpx;
      height: 34rpx;
    }

    .right {
      width: 100rpx;
      height: 48rpx;
      background: #ffffff;
      border-radius: 24rpx;
      justify-content: center;

      text {
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #fe2c2e;
      }
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
  }

  .box_item {
    box-sizing: border-box;
    width: 324rpx;
    padding: 16rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: relative;
    margin-right: 10rpx;
    margin-top: 10rpx;

    &:nth-child(2n) {
      margin-right: 0;
    }

    .cont {
      background: #ffffff;
      box-sizing: border-box;

      .top {
        width: 100%;
        height: 164rpx;
        border-radius: 8rpx;
        flex: none;
      }

      .bottom {
        flex: 1;

        .zsd {
          height: 52rpx;

          .f22 {
            text {
              display: inline-block;

              &:nth-of-type(2) {
                margin-left: 4rpx;
              }

              &:nth-of-type(3) {
                font-size: 32rpx;
                font-weight: bolder;
              }

              &:nth-of-type(4) {
                margin-left: 8rpx;
                text-decoration: line-through;
                color: #999999;
              }
            }
          }
        }
      }

      .payBtn {
        height: 54rpx;
        background: #fdf0f1;
        border-radius: 28rpx;
        padding-left: 20rpx;
        box-sizing: border-box;

        .time {
          display: inline-block;
          font-weight: Medium;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: Medium;
          color: #fe2c2e;
        }

        image {
          width: 84rpx;
          height: 54rpx;
        }
      }
      .payBtnb {
        height: 54rpx;
        background: rgba(254, 168, 44, 0.1);
        border-radius: 28rpx;
        padding-left: 20rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: Medium;
        color: #ff8300;
        justify-content: center;

        .times {
          display: inline-block;
          font-weight: Medium;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: Medium;
          color: #ff8300;
        }
      }
    }
  }
}
</style>